<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

<script>
    $(function () {
        var pq = {
            totalRecords: 0,
            requestPage: 1,
            pending: true,
            rpp: 100, //records per request.
            data: []
        };
        var obj = {            
            selectionModel: { type: 'row' },
            scrollModel: {
                autoFit: true
            },
            numberCell: { width: 60 },
            title: "Infinite Scrolling",
            virtualX: true, virtualY: true,
            resizable: true,
            beforeSort: function () {
                pq.data = [];
                pq.requestPage = 1;
            },
            beforeTableView: function (evt, ui) {                
                var finalV = ui.finalV,
                    data = pq.data;
                if (ui.initV == null) {
                    return;
                }
                if (!pq.pending && finalV >= data.length - 1 && data.length < pq.totalRecords) {
                    pq.requestPage++;
                    pq.pending = true;                    
                    //request more rows.
                    $(this).pqGrid('refreshDataAndView');
                }
            }
        };
        function formatCurrency(ui) {
            return (ui.cellData != null) ? ("$" + $.paramquery.formatCurrency(ui.cellData)) : "";
        }
        obj.colModel = [{ title: "Company", dataIndx: 'company' },
            { title: "Notes", dataIndx: 'notes' },
            { title: "Revenues ($ millions)", dataType: "float", align: "right", dataIndx: 'revenue', render: formatCurrency },
            { title: "Profit ($ millions)", dataType: "float", align: "right", dataIndx: 'profits', render: formatCurrency }
        ];        
        obj.dataModel = {
            data: pq.dataCache,
            dataType: "JSON",
            location: "remote",
            sorting: 'remote',
            sortIndx: 'company',
            url: "/pro/infiniteData",
            postData: function () {
                return {
                    pq_curpage: pq.requestPage,
                    pq_rpp: pq.rpp
                };
            },
            getData: function (response) {
                var data = response.data,
                    len = data.length,
                    curPage = response.curPage,
                    pq_data = pq.data,
                    init = (curPage - 1) * pq.rpp;
                pq.pending = false;
                pq.totalRecords = response.totalRecords;
                for (var i = 0; i < len; i++) {
                    pq_data[i + init] = data[i];
                }
                return { data: pq_data }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //alert(errorThrown);
            }
        };

        $("#grid_infinite").pqGrid(obj);
    });
        
</script>    
</head>
<body>

<div id="grid_infinite"></div>
<br>

</body>

</html>
